<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/echarts@5"></script>
        <style>
            #main {
                width: 200px;
                height: 200px;
                margin: 100px auto;
            }
        </style>
        <style>
            /* 在 CSS 文件中定义自定义字体 */
            @font-face {
                font-family: "MyCustomFont"; /* 自定义字体名称 */
                src: url("public/只含数字.ttf");
                font-weight: normal;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script>
            var chart = echarts.init(document.getElementById("main"));

            const bgColor = "#1F1316";

            chart.setOption({
                backgroundColor: "black",
                series: [
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            // shadowColor: "#fff",
                            // shadowBlur: 10,
                        },
                        progress: {
                            show: true,
                            width: 8,
                            // roundCap: true,
                            overlap: true,
                            itemStyle: {
                                // borderColor: "#fff",
                                // borderWidth: 1,
                                // opacity: 1,
                                // borderType: [5, 10],
                                // borderDashOffset: 5,
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: "#00D753" }, // 渐变起始色
                                        { offset: 1, color: "#44D753" }, // 渐变结束色
                                    ],
                                },
                                // shadowColor: "#f20075",
                                // shadowBlur: 10,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                // color: [[1, "#1F1016"]], // 背景圆环
                                color: [[1, bgColor]], // 背景圆环
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: "{value}\n%",
                            fontSize: 24,
                            fontFamily: "MyCustomFont",
                            color: "#fff",
                            textShadowColor: "#00D753",
                            textShadowBlur: 10,
                            textBorderColor: "#00D753",
                            textBorderWidth: 1,
                            offsetCenter: [0, "0%"],
                        },
                        data: [
                            {
                                value: 49,
                            },
                        ],
                        z: 1,
                    },
                    // 紧贴外圈与背景同色 利用遮蔽下层颜色产生间隔效果
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            color: "",
                        },
                        progress: {
                            show: true,
                            width: 2,
                            itemStyle: {
                                color: bgColor,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [
                            {
                                value: 100,
                            },
                        ],
                        z: 2,
                    },
                    // 开始处齐点
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            color: "",
                        },
                        progress: {
                            show: true,
                            width: 10,
                            itemStyle: {
                                // borderColor: "#fffae5",
                                // borderWidth: 1,
                                // borderType: [5, 10],
                                // borderDashOffset: 5,
                                color: "#fffae5",
                                shadowColor: "#fff",
                                shadowBlur: 5,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [
                            {
                                value: 0.5,
                            },
                        ],
                        z: 3,
                    },
                ],
            });
        </script>
    </body>
</html>
